<template>
  <div>
    <div>
      <span>尺寸限制</span>
      <span
        class="hover:text-[#2080f0] cursor-pointer ml-[10px]"
        @click.native="handleAdd"
      ><SvgIcon icon-class="Plus" class="inline text-[12px]"/></span>
    </div>
    <div class="flex items-center flex-wrap">
      <div
        class="mr-[16px] mb-[16px] whitespace-nowrap"
        v-for="(item, index) in limitData"
        :key="item.key"
      >
        <VGroup>
          <el-input
            placeholder="请输入"
            v-model="item.rule_min_value"
            style="width: 250px"
          >
            <template #append>{{ item?.unit || "cm" }}</template>
          </el-input>
          <el-select
            v-model="item.min_ratio_type"
            placeholder="请选择"
            style="width: 90px"
          >
            <el-option
              v-for="option in [options.symbol[0]]"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
          <el-select
            v-model="item.rule_type"
            placeholder="请选择"
            style="width: 250px"
            @change="(val) => handleRuleTypeChange(val, item)"
          >
            <el-option
              v-for="option in availableOptions(item.rule_type)"
              :key="option.value"
              :label="option.label"
              :value="option.value"
              :disabled="isOptionDisabled(option.value)"
            />
          </el-select>
          <el-select
            v-model="item.max_ratio_type"
            placeholder="请选择"
            style="width: 90px"
          >
            <el-option
              v-for="option in [options.symbol[1]]"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
          <el-input
            placeholder="请输入"
            v-model="item.rule_max_value"
            style="width: 250px"
          >
            <template #append>{{ item?.unit || "cm" }}</template>
          </el-input>
          <span
            class="hover:text-[#2080f0] cursor-pointer ml-[10px]"
            @click.native="handleAdd"
          >
            <SvgIcon icon-class="Plus" class="text-[12px] inline"/>
          </span>
          <span
            class="hover:text-[#2080f0] cursor-pointer ml-[8px]"
            @click="handleDelete(index)"
          ><SvgIcon icon-class="Minus" class="text-[12px] inline"/>
          </span>
        </VGroup>
      </div>
    </div>
  </div>
</template>

<script setup lang="jsx">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  options: { type: Object, default: () => ({}) },
  data: { type: Array, default: () => [] },
});
const { options } = toRefs(props);

const limitData = ref([
  {
    key: +new Date(),
    rule_min_value: null,
    rule_type: null,
    min_ratio_type: 3,
    max_ratio_type: 4,
    rule_max_value: null,
    unit: "cm",
  },
]);
watch(
  () => props.data,
  (val) => {
    console.log(val);
    if (val && val.length) {
      for (let i = 0; i < val.length; i++) {
        let data = options.value["surcharge_rule_type"].find(
          (it) => it.val === val[i].rule_type
        );
        val[i].unit = data?.unit || "cm";
        val[i].key = i;
      }
      limitData.value = val;
      console.log(limitData.value);
    } else {
      limitData.value = [
        {
          key: +new Date(),
          rule_min_value: null,
          rule_type: null,
          min_ratio_type: 3,
          max_ratio_type: 4,
          rule_max_value: null,
          unit: "cm",
        },
      ];
      console.log(3333);
      console.log(limitData.value);
    }
  }
);

const handleAdd = () => {
  limitData.value.push({
    key: +new Date(),
    rule_min_value: null,
    rule_type: null,
    min_ratio_type: 3,
    max_ratio_type: 4,
    rule_max_value: null,
    unit: "cm",
  });
};

const handleDelete = (index) => {
  limitData.value.splice(index, 1);
};

const handleRuleTypeChange = (val, item) => {
  let data = options.value["surcharge_rule_type"].find(
    (it) => it.value === val
  );
  item.unit = data?.unit || "cm";
};

const isOptionDisabled = (value) => {
  return limitData.value.some((item) => item.rule_type === value);
};

const availableOptions = (currentValue) => {
  return options.value["surcharge_rule_type"].filter(
    (option) => option.value === currentValue || !isOptionDisabled(option.value)
  );
};
const submit = () => {
  return new Promise((resolve, reject) => {
    try {
      if (limitData.value.length == 1 && !limitData.value[0].rule_type) {
        limitData.value = [];
      }
      resolve({
        channel_transport_cost_rls: JSON.parse(JSON.stringify(limitData.value)),
      });
    } catch (e) {}
  });
};

const reset = () => {
  limitData.value = {
    key: +new Date(),
    rule_min_value: null,
    rule_type: null,
    min_ratio_type: 3,
    max_ratio_type: 4,
    rule_max_value: null,
    unit: "cm",
  };
};
defineExpose({ submit, reset });
</script>
